<template>
	<div>
		<!-- 顶部 -->
		<div style="height: 60px; background-color: #47afdc;display: flex;align-items: center">
			<div style="width: 200px;display: flex;align-items: center;">
				<span style="font-size: 18px;color: white;margin-left: 30px">
				后台管理系统
				</span>
			</div>
		<div style="flex: 1"></div>
			<div style="width: fit-content;display: flex;align-items: center;padding-right: 10px">
				<el-avatar> user </el-avatar>
				<span style="color: white;margin-left: 5px">Chan</span>
			</div>
		</div>
		
		<div style="display: flex">
			<!-- 左侧菜单栏：固定宽度 -->
			<div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px); z-index: 10; background: white">
				<el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
					<el-menu-item index="/manager/home">
					<el-icon><House/></el-icon>
						系统首页
					</el-menu-item>
          <el-menu-item index="/manager/test">
            <el-icon><ChatDotSquare/></el-icon>
            测试
          </el-menu-item>
					<el-sub-menu index="1">
						<template #title>
							<el-icon><location /></el-icon>
							<span>用户管理</span>
						</template>
              <el-menu-item index="/manager/user">账户管理</el-menu-item>
					</el-sub-menu>
					<el-menu-item index="/manager/data">数据统计</el-menu-item>
					<el-menu-item index="/manager/book">书籍管理</el-menu-item>
				</el-menu>
			</div>
			
			<div style="flex: 1;width: 0;background-color: #f5f7ff;padding: 10px">
				<RouterView/>
			</div>
		</div>
	</div>
</template>


<script setup>

import router from '@/router/index.js'
</script>



<style scoped>
.el-menu .is-active{
	background-color: #e6ecf7 !important;
}
</style>
